<!--
 * @Author: wys
 * @Date: 2021-05-08 13:25:52
 * @LastEditors: wys
 * @LastEditTime: 2021-07-08 14:21:08
 * @description: 图片组件,src开头为/时加载Front-Assets项目图片
 -->
<template>
  <image
    :class="'bx-image ' + className + (isHead ? ' tou-image' : '')+ (back_img ? ' back_img' : '')+ (wh_100 ? ' wh_100' : '')"
    :style="styleObj"
    :lazy-load="lazy"
    :src="url"
    :mode="mode"
    @click="handleEvent($event, 'click')"
    @longpress="handleEvent($event, 'longpress')"
    @load="handleEvent($event, 'load')"
    @error="handleEvent($event, 'error')" />
</template>

<script>
export default {
  name: 'BaseImage',
  props: {
    // 图片请求地址
    src: {
      type: String,
      require: true,
      default: ''
    },
    // 是否开启懒加载
    lazy: {
      type: Boolean,
      default: true
    },
    className: {
      type: String,
      default: ''
    },
    mode: {
      type: String,
      default: 'scaleToFill' // scaleToFill: fiil; aspectFit: 全显示; aspectFill: 截取短边; widthFix: 保持比例
    },
    // 图片高度及oss请求图片的高
    height: {
      type: [String, Number],
      default: ''
    },
    // 图片宽度及oss请求图片的宽
    width: {
      type: [String, Number],
      default: ''
    },
    xWidth: {
      type: Number,
      default: 750
    },
    isAsset: { // 网络图
      type: Boolean,
      default: false
    },
    isHead: { // 是否是头像
      type: Boolean,
      default: false
    },
    needClip: { // 是否需要裁减
      type: Boolean,
      default: true
    },
    autoSet: { // 加载完是否自动设置原来图片宽高
      type: Boolean,
      default: false
    },
    from: { // 组件哪里引入
      type: String,
      default: ''
    },
    //是否显示原始url
    original_url:{
      type: Boolean,
      default: false
    },
    //是否显示背景图
    back_img:{
      type: Boolean,
      default: true
    },
    //宽高用px显示，用于width,height是获取系统计算图片宽高的情况，因为系统获取的是px像素，正常填的则是rpx
    is_px:{
      type: Boolean,
      default: false
    },
    //宽高100%
    wh_100:{
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      url: '',
      screenWidth: 0,
      styleObj: ''
    }
  },
  watch: {
    src(f, t) {
      this._initImage()
    }
  },
  created() {
    const res = uni.getSystemInfoSync()
    this.screenWidth = res.screenWidth
    this._initImage()
  },
  methods: {
    _initImage() {
      let reg=new RegExp("^/");
      if(!this.original_url&&reg.test(this.src)){
        this.url = 'https://asset-uat.bisinuolan.cn/bixuan_uni' + this.src;
        // this.url = process.env.VUE_APP_IMAGE_ASSET + this.src;
      }else{
        this.url=this.src; 
      }
      if (this.width) {
        this.styleObj += `width: ${this.width}${this.is_px?'px':'rpx'};`
      }
      if (this.height) {
        this.styleObj += `height: ${this.height}${this.is_px?'px':'rpx'};`
      }
    },
    handleEvent(e, type) {
      switch (type) {
        case 'load':
          this.$emit(type, e)
          if (this.autoSet) {
            if (this.from === 'home') {
              this.styleObj += 'width:' + Math.ceil(e.detail.width / e.detail.height * 50) + 'rpx;height: 82rpx;margin-bottom: 6rpx;'
            } else {
              this.styleObj += 'width:' + e.detail.width + 'rpx;height: ' + e.detail.height + 'rpx;'
            }
          }
          this.styleObj += 'background: none;'
          break
        case 'longpress':
        case 'click':
        case 'error':
          this.$emit(type, e)
          break
        default:
          break
      }
    }
  }

}
</script>

<style lang="scss" scoped>
.bx-image{
  max-width: 100%;
  max-height: 100%;
}
.wh_100{
  width: 100%;
  height: 100%;
}
.back_img{
  background: #f5f5f5 url('../../static/images/default.png') no-repeat center center;
  background-size: contain;
}
.tou-image{
  background: #f5f5f5 url('../../static/images/app_logo.png') no-repeat center center;
  background-size: contain;
  max-width: 100%;
  max-height: 100%;
}
</style>
